import React from 'react'
import InterestsItem from '../../../../components/pages/analytics/InterestsItem'
import {BookOpen, Film, Music, Slash, Target} from "react-feather";
import {Card} from "reactstrap";

const Interests = React.memo(props => {

  const icons = {
    "Музыка": {icon: <Music className="primary" size={22}/>, color: "primary"},
    "Фильмы": {icon: <Film className="info" size={22}/>, color: "info"},
    "Книги": {icon: <BookOpen className="success" size={22}/>, color: "success"},
    "Игры": {icon: <Target className="warning" size={22}/>, color: "warning"},
    "Не указано": {icon: <Slash className="danger" size={22}/>, color: "danger"},
  }

  return (
    <Card className="analytics-card-container">
      <div className="statistics-card-header">
        <h3 className="st-card-title">Интересы</h3>
      </div>
      <div className="statistics-card-content mt-2">

        {
          props.data && props.data.map((item, index) => {
            return (
              <InterestsItem
                key={index}
                title={item.name}
                percent={item.count}
                color={icons[item.name].color}
                icon={icons[item.name].icon}
              />
            )
          })
        }

      </div>
    </Card>
  )
})

export default Interests
